<template>
  <div class="register-container">
    <h1>现场挂号</h1>
    
    <div class="button-group">
      <el-button type="primary" @click="handleRegister">挂号</el-button>
      <el-button @click="resetForm">清空</el-button>
    </div>

    <el-form ref="registerFormRef" :model="registerForm" label-width="80px" size="default">
      <!-- 基本信息 -->
      <div class="form-section">
        <h3>基本信息</h3>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="病历号" prop="caseNumber" required>
              <el-input v-model="registerForm.caseNumber" placeholder="请输入病历号" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="姓名" prop="realName" required>
              <el-input v-model="registerForm.realName" placeholder="请输入病人姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别" prop="gender" required>
              <el-select v-model="registerForm.gender" placeholder="请选择性别">
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="年龄" prop="age" required>
              <el-row :gutter="10" type="flex" align-items="center">
                <el-input v-model.number="registerForm.age" placeholder="请输入" style="width: 80px" />
                <el-select v-model="registerForm.ageType" placeholder="请选择" style="flex: 1">
                  <el-option label="年" value="年" />
                  <el-option label="月" value="月" />
                  <el-option label="日" value="日" />
                </el-select>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="出生日期">
              <el-date-picker
                v-model="registerForm.birthday"
                type="date"
                placeholder="选择日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="家庭住址">
              <el-input v-model="registerForm.homeAddress" placeholder="请输入家庭住址" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身份证号" prop="cardNumber" required>
              <el-input v-model="registerForm.cardNumber" placeholder="请输入身份证号" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 挂号信息 -->
      <div class="form-section">
        <h3>挂号信息</h3>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="结算类别" prop="settleCategoryId" required>
              <el-select v-model="registerForm.settleCategoryId" placeholder="请选择">
                <el-option label="自费" value="1" />
                <el-option label="医保" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="看诊日期" prop="visitDate" required>
              <el-date-picker
                v-model="registerForm.visitDate"
                type="date"
                placeholder="选择日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="午别" prop="noon" required>
              <el-select v-model="registerForm.noon" placeholder="请选择">
                <el-option label="上午" value="上午" />
                <el-option label="下午" value="下午" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="挂号科室" prop="deptmentId" required>
              <el-select v-model="registerForm.deptmentId" placeholder="请选择">
                <el-option label="内科" value="1" />
                <el-option label="外科" value="2" />
                <el-option label="儿科" value="3" />
                <el-option label="妇产科" value="4" />
                <el-option label="眼科" value="5" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="号别" prop="registLevelId" required>
              <el-select v-model="registerForm.registLevelId" placeholder="请选择">
                <el-option label="普通号" value="1" />
                <el-option label="专家号" value="2" />
                <el-option label="主任医师号" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="看诊医生" prop="employeeId" required>
              <el-select v-model="registerForm.employeeId" placeholder="请选择医生">
                <el-option label="张医生" value="1" />
                <el-option label="李医生" value="2" />
                <el-option label="王医生" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="初始号额">
              <el-input v-model.number="initialQuota" placeholder="请输入" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="已用号额">
              <el-input v-model.number="usedQuota" placeholder="请输入" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="病历本">
              <el-switch v-model="registerForm.isBook" active-value="是" inactive-value="否" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="应收金额" prop="registMoney" required>
              <el-input v-model.number="registerForm.registMoney" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="收费方式" prop="registMethod" required>
              <el-select v-model="registerForm.registMethod" placeholder="请选择">
                <el-option label="现金" value="现金" />
                <el-option label="银行卡" value="银行卡" />
                <el-option label="微信" value="微信" />
                <el-option label="支付宝" value="支付宝" />
                <el-option label="医保卡" value="医保卡" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'

// 表单数据
const registerForm = reactive({
  caseNumber: '',
  realName: '',
  gender: '',
  age: null,
  ageType: '年',
  birthday: new Date(),
  homeAddress: '',
  cardNumber: '',
  visitDate: new Date(),
  noon: '',
  deptmentId: null,
  employeeId: null,
  registLevelId: null,
  settleCategoryId: null,
  isBook: '是',
  registMethod: '',
  registMoney: 0
})

// 表单引用
const registerFormRef = ref(null)

// 号额信息
const initialQuota = ref(50)
const usedQuota = ref(20)

// 处理挂号
const handleRegister = async () => {
  try {
    // 验证表单
    await registerFormRef.value.validate()
    
    // 设置看诊状态为已挂号
    const registerData = {
      ...registerForm,
      visitState: 1 // 1-已挂号
    }
    
    // 调用后端接口
    const response = await request.post('/registers', registerData)
    
    if (response.code === 200) {
      ElMessage.success('挂号成功')
      resetForm()
    } else {
      ElMessage.error(response.data.msg || '挂号失败')
    }
  } catch (error) {
    console.error('挂号失败:', error)
    ElMessage.error('网络错误，请重试')
  }
}

// 重置表单
const resetForm = () => {
  registerFormRef.value.resetFields()
  registerForm.birthday = new Date()
  registerForm.visitDate = new Date()
  registerForm.isBook = '是'
}
</script>

<style scoped>
.register-container {
  padding: 20px;
  background-color: #fff;
  min-height: 100vh;
}

h1 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e4e7ed;
}

.button-group {
  margin-bottom: 20px;
}

.form-section {
  margin-bottom: 30px;
}

.form-section h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #303133;
}

.el-input,
.el-select,
.el-date-picker {
  width: 100%;
}
</style>